import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/utils/xin_he_image.dart';

import '../../../utils/xh_styles.dart';
import '../../shopping_car/models/xin_he_goods_model.dart';
import 'xin_he_group_purchase_logic.dart';

class XinHeGroupPurchasePage extends StatelessWidget {
  XinHeGroupPurchasePage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeGroupPurchaseLogic());
  final state = Get.find<XinHeGroupPurchaseLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: XinHeColor('#F3F8F9'),
      body: Column(children: [
        ///header
        Stack(children: [
          Column(children: [

            Container(
              height: 197.5,
              width: Get.width,
              decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [
                    XinHeColor('#FF6325'),
                    XinHeColor('#FF9366')
                  ])
              ),
            ),



          ],),

          XinHeAssetImage('assets/images/home/group_purchase_bg.png',width: Get.width,height: 197.5,),

          Positioned(
            top: Get.mediaQuery.padding.top,
              child:  Container(
            alignment: Alignment.centerLeft,
            height: 44,
            child: Row(children: [
              GestureDetector(
                onTap: (){
                  Get.back();
                },
                child: Container(
                  height: 44,
                  width: 40,
                  color: Colors.transparent,
                  alignment: Alignment.center,
                  child: const XinHeAssetImage(
                    'assets/images/home/app_back_3.png',
                    width: 9.5,
                    height: 17,
                    fit: BoxFit.cover,),
                ),
              ),
              const SizedBox(width: 5,),
              const XinHeAssetImage('assets/images/home/group_purchase_title.png',width:96 ,height: 19,),
            ],),
          )),

          Positioned(
            bottom: 21.5,
              child: _searchView()),

          // Container(
          //   height: 197.5,
          //   width: Get.width,
          //   child: Column(children: [
          //     SizedBox(height: Get.mediaQuery.padding.top,),
          //
          //     Container(
          //       alignment: Alignment.centerLeft,
          //       height: 44,
          //       child: Row(children: [
          //         GestureDetector(
          //           onTap: (){
          //             Get.back();
          //           },
          //           child: Container(
          //             height: 44,
          //             width: 40,
          //             color: Colors.transparent,
          //             alignment: Alignment.center,
          //             child: const XinHeAssetImage(
          //               'assets/images/home/app_back_3.png',
          //               width: 9.5,
          //               height: 17,
          //               fit: BoxFit.cover,),
          //           ),
          //         ),
          //         const SizedBox(width: 5,),
          //         const XinHeAssetImage('assets/images/home/flash_sale.png',width:96 ,height: 19,),
          //       ],),
          //     ),
          //
          //     const SizedBox(height: 10,),
          //
          //     _searchView(),
          //
          //
          //
          //
          //
          //   ],),
          // )


        ],),


        ///list
        Expanded(child: ListView.builder(
            padding: const EdgeInsets.only(top: 5),
            itemCount: 10,
            itemBuilder: (ctx,index){
              return Container(
                height: 120,
                alignment: Alignment.centerLeft,
                margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 5),
                padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 15),
                decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(5)),
                child: _goodsItemView(XinHeGoodsModel(), 0),);}
        )
        )
      ],),
    );
  }


  Widget _searchView() {
    return Container(
      padding: EdgeInsets.only(left: 15,right: 15,top: 0,bottom: 0),
      height: 35,
      color: Colors.transparent,
      child: Container(
          width: Get.width - 30,
          decoration: BoxDecoration(color: XinHeColor('#F0F7F8'),borderRadius: BorderRadius.circular(17.5)),
          alignment: Alignment.center,
          child:Row(children: [
            const Padding(
              padding: EdgeInsets.only(left: 10,right: 5),
              child: XinHeAssetImage('assets/images/home/search_12.png',width: 12,height: 12,fit: BoxFit.fill,),
            ),

            Expanded(
              child: TextField(
                controller: logic.editingController,
                onChanged: (value){
                  logic.inputChange(value);
                },
                onSubmitted: (value){
                  logic.onInputSubmitAction();
                },

                onEditingComplete: logic.onInputEditCompleteAction,
                maxLines: 1,
                // maxLength: 15,
                style:   TextStyle(fontSize: 14,color: XinHeColor('#15161F')),
                decoration:  InputDecoration(
                    hintText:  '请输入商品名',
                    hintStyle: TextStyle(fontSize: 14,color: XinHeColor('#B1B1B1') ),
                    filled: true,
                    fillColor:  XinHeColor('#F7F8F9'),
                    border: const OutlineInputBorder(
                      // borderRadius: BorderRadius.all(Radius.circular(8)),
                      borderSide:  BorderSide(color: Colors.transparent),
                    ),
                    enabledBorder:  const OutlineInputBorder(
                      // borderRadius: BorderRadius.all(Radius.circular(8)),
                      borderSide:  BorderSide(color: Colors.transparent),
                    ),
                    focusedBorder:  const OutlineInputBorder(
                      // borderRadius: BorderRadius.all(Radius.circular(8)),
                      borderSide:  BorderSide(color: Colors.transparent),
                    ),
                    disabledBorder:  const OutlineInputBorder(
                      // borderRadius: BorderRadius.all(Radius.circular(8)),
                      borderSide:  BorderSide(color: Colors.transparent),
                    ),
                    contentPadding: const EdgeInsets.only(top: 0,bottom: 0,left: 0,right: 15)
                ),
                // inputFormatters: [LengthLimitingTextInputFormatter(15)],
              ),
            ),

            ///一键清除文本
            state.isShowDelete.value
                ? GestureDetector(
              onTap: (){
                logic.clearInputContent();
              },
              child: Container(
                // padding: EdgeInsets.all(3),
                margin: const EdgeInsets.only(left: 8),
                height: 20,
                width: 20,
                child: const XinHeAssetImage('assets/images/home/input_delete.png',width: 20,height: 20,fit: BoxFit.fill,),

              ),
            )
                :Container(),

            GestureDetector(
              onTap: (){
                logic.onInputEditCompleteAction();
              },
              child: Container(
                width: 54,
                height: 33,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(16.5),
                ),
                child:  Text('搜索',style: TextStyle(color: XinHeColor('#232C2C'),fontSize: 14,fontWeight: FontWeight.w500),),
              ),
            ),
          ],)
        // Text('请输入商品名',style: TextStyle(color: XinHeColor('#C3C3C3'),fontSize: 13),)
      ),

    );
  }

  Widget _goodsItemView(XinHeGoodsModel model,int index){
    return Stack(
      children: [
        Container(
          color: Colors.white,
          width: Get.width-30,
          height: 90,

          child:  Row(
            children: [

              const Padding(
                padding:  EdgeInsets.only(left: 0,top: 0,right: 15,bottom: 0),
                child: XinHeAssetImage('assets/images/home/tmp.png',width: 90,height: 90,fit: BoxFit.fill,),
              ),

              ///描述与价格数量
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                      width:Get.width-30-90-30-15,
                      child: Text('一级冷榨有机野山茶籽油500ML级冷榨有机野iii',maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                  ),
                  const SizedBox(height: 10,),



                  SizedBox(
                    width:Get.width-30-90-30-15,
                    height: 23,
                    child: Row(
                      children: [

                        RichText(
                            text: TextSpan(children: [
                              ///￥
                              TextSpan(
                                text: '￥',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 9,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                              ///
                              TextSpan(
                                text: '${model.price}',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                            ]
                            )),
                        const Spacer(),

                        Container(
                          height: 25,
                          width: 62,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            gradient: LinearGradient(colors: [ XinHeColor('##F89A30'), XinHeColor('#E84128')]),borderRadius: BorderRadius.circular(12.5),),
                          child: const Text('立即抢购',style: TextStyle(color: Colors.white,fontSize: 12),strutStyle: StrutStyle(forceStrutHeight: true),),),
                        const SizedBox(width: 0,)

                      ],
                    ),
                  )

                ],)


            ],
          ),
        ),

        // Positioned(
        //   bottom: 0,
        //   right: 15,
        //   child: Container(
        //     width: Get.width-30-30,
        //     color: XinHeColor('#E7EEEE'),
        //     height: 0.5,),
        // )

      ],
    );
  }

}
